<template>
  <div class="notice">
    <page-header title="医院公告" subtitle="了解医院最新动态和信息"></page-header>
    
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="notice-list-card">
          <template #header>
            <div class="card-header">
              <span>公告列表</span>
              <el-input
                v-model="searchKeyword"
                placeholder="搜索公告"
                prefix-icon="Search"
                clearable
                style="width: 200px"
                @input="handleSearch"
              ></el-input>
            </div>
          </template>
          
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="全部公告" name="all"></el-tab-pane>
            <el-tab-pane label="医院新闻" name="news"></el-tab-pane>
            <el-tab-pane label="就诊指南" name="guide"></el-tab-pane>
            <el-tab-pane label="科室动态" name="department"></el-tab-pane>
          </el-tabs>
          
          <div v-if="filteredNotices.length > 0">
            <el-timeline>
              <el-timeline-item
                v-for="notice in filteredNotices"
                :key="notice.id"
                :timestamp="notice.date"
                placement="top"
                :type="notice.important ? 'danger' : ''"
                :hollow="!notice.important"
              >
                <el-card class="notice-item" shadow="hover" @click="selectNotice(notice)">
                  <div class="notice-title">
                    {{ notice.title }}
                    <el-tag v-if="notice.important" type="danger" size="small">重要</el-tag>
                    <el-tag v-if="notice.isNew" type="success" size="small">新</el-tag>
                    <el-tag :type="getTagType(notice.type)" size="small">{{ notice.type }}</el-tag>
                  </div>
                  <div class="notice-summary">{{ notice.summary }}</div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          
          <empty-state v-else description="暂无公告" button-text="刷新" @action="refreshNotices"></empty-state>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card v-if="selectedNotice" class="notice-detail-card">
          <template #header>
            <div class="card-header">
              <span>公告详情</span>
              <div class="notice-meta">
                <el-tag :type="getTagType(selectedNotice.type)" size="small">{{ selectedNotice.type }}</el-tag>
                <span class="notice-date">{{ selectedNotice.date }}</span>
              </div>
            </div>
          </template>
          
          <h3 class="detail-title">{{ selectedNotice.title }}</h3>
          <div class="detail-content" v-html="selectedNotice.content"></div>
          
          <div class="detail-footer">
            <div class="detail-author">发布人：{{ selectedNotice.author }}</div>
            <div class="detail-department">发布部门：{{ selectedNotice.department }}</div>
          </div>
        </el-card>
        
        <el-card v-else class="notice-detail-card empty-detail">
          <empty-state description="请选择一条公告查看详情"></empty-state>
        </el-card>
        
        <el-card class="hot-notice-card">
          <template #header>
            <div class="card-header">
              <span>热门公告</span>
            </div>
          </template>
          
          <el-list>
            <el-list-item v-for="notice in hotNotices" :key="notice.id" @click="selectNotice(notice)">
              <div class="hot-notice-item">
                <div class="hot-notice-title">{{ notice.title }}</div>
                <div class="hot-notice-views">
                  <el-icon><View /></el-icon> {{ notice.views }}
                </div>
              </div>
            </el-list-item>
          </el-list>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import EmptyState from '@/components/EmptyState.vue'
import { Search, View } from '@element-plus/icons-vue'

const searchKeyword = ref('')
const activeTab = ref('all')
const selectedNotice = ref(null)

const notices = reactive([
  {
    id: 1,
    title: '医院门诊时间调整通知',
    summary: '自2023年6月1日起，我院门诊时间调整为上午8:00-12:00，下午13:30-17:30。',
    content: '<p>尊敬的患者朋友：</p><p>为了更好地为广大患者提供医疗服务，根据医院工作安排，自2023年6月1日起，我院门诊时间调整如下：</p><p>1. 普通门诊：周一至周五 上午8:00-12:00，下午13:30-17:30</p><p>2. 专家门诊：周一至周五 上午8:30-11:30，下午14:00-16:30</p><p>3. 急诊科：24小时</p><p>感谢您的理解与配合！</p>',
    date: '2023-05-15',
    type: '就诊指南',
    important: true,
    isNew: true,
    author: '医务科',
    department: '行政管理部',
    views: 1245
  },
  {
    id: 2,
    title: '新冠疫苗接种通知',
    summary: '我院现开展新冠疫苗接种服务，请市民朋友们预约后前来接种。',
    content: '<p>为做好新冠肺炎疫情防控工作，我院现开展新冠疫苗接种服务。</p><p><strong>接种时间：</strong>周一至周日 上午8:30-11:30，下午14:00-16:30</p><p><strong>接种地点：</strong>医院门诊楼一层预防接种门诊</p><p><strong>接种对象：</strong>18周岁及以上人群</p><p><strong>注意事项：</strong></p><ul><li>请携带身份证</li><li>请提前在"健康码"小程序上预约</li><li>接种前请保证充足休息，避免空腹</li></ul>',
    date: '2023-05-10',
    type: '医院新闻',
    important: true,
    isNew: false,
    author: '预防保健科',
    department: '公共卫生部',
    views: 2356
  },
  {
    id: 3,
    title: '医院系统升级通知',
    summary: '我院将于2023年5月20日进行系统升级，届时网上预约系统将暂停使用4小时。',
    content: '<p>尊敬的患者朋友：</p><p>我院将于2023年5月20日凌晨0:00-4:00进行系统升级维护，届时网上预约系统、自助挂号机、移动端APP等将暂停使用。</p><p>系统恢复后，原已预约的挂号信息不受影响。</p><p>如有疑问，请联系我院客服热线：0123-4567890</p><p>感谢您的理解与支持！</p>',
    date: '2023-05-05',
    type: '就诊指南',
    important: false,
    isNew: false,
    author: '信息科',
    department: '行政管理部',
    views: 876
  },
  {
    id: 4,
    title: '内科专家团队义诊活动',
    summary: '我院内科将于2023年5月25日举办专家义诊活动，欢迎广大患者朋友参加。',
    content: '<p>为了更好地服务广大患者，我院内科将于2023年5月25日举办专家义诊活动。</p><p><strong>活动时间：</strong>2023年5月25日 上午9:00-11:30</p><p><strong>活动地点：</strong>医院门诊大厅</p><p><strong>参与专家：</strong>张主任（心内科）、李主任（消化内科）、王主任（呼吸内科）等</p><p><strong>活动内容：</strong>免费咨询、健康指导、义诊服务</p><p>欢迎广大患者朋友参加！</p>',
    date: '2023-04-28',
    type: '科室动态',
    important: false,
    isNew: false,
    author: '内科',
    department: '内科',
    views: 1023
  },
  {
    id: 5,
    title: '医院获评"省级文明单位"荣誉称号',
    summary: '我院近日被评为"省级文明单位"，这是对医院工作的充分肯定。',
    content: '<p>近日，我院被省文明委评为"省级文明单位"，这是对医院多年来坚持以病人为中心，不断提升医疗服务质量和水平的充分肯定。</p><p>多年来，医院始终坚持"以病人为中心"的服务理念，不断改善医疗服务，提升患者就医体验，医院的社会满意度和美誉度不断提高。</p><p>医院将以此为契机，继续深化医院内涵建设，提升医疗服务质量，为广大患者提供更加优质、高效、便捷的医疗服务。</p>',
    date: '2023-04-20',
    type: '医院新闻',
    important: false,
    isNew: false,
    author: '宣传科',
    department: '行政管理部',
    views: 1567
  }
])

const filteredNotices = computed(() => {
  let result = notices
  
  // 根据标签筛选
  if (activeTab.value !== 'all') {
    result = result.filter(notice => {
      if (activeTab.value === 'news') return notice.type === '医院新闻'
      if (activeTab.value === 'guide') return notice.type === '就诊指南'
      if (activeTab.value === 'department') return notice.type === '科室动态'
      return true
    })
  }
  
  // 根据关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(notice => 
      notice.title.toLowerCase().includes(keyword) || 
      notice.summary.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

const totalNotices = computed(() => {
  let result = notices
  
  // 根据标签筛选
  if (activeTab.value !== 'all') {
    result = result.filter(notice => {
      if (activeTab.value === 'news') return notice.type === '医院新闻'
      if (activeTab.value === 'guide') return notice.type === '就诊指南'
      if (activeTab.value === 'department') return notice.type === '科室动态'
      return true
    })
  }
  
  // 根据关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(notice => 
      notice.title.toLowerCase().includes(keyword) || 
      notice.summary.toLowerCase().includes(keyword)
    )
  }
  
  return result.length
})

const hotNotices = computed(() => {
  return [...notices].sort((a, b) => b.views - a.views).slice(0, 3)
})

const handleSearch = () => {
  // 搜索时不需要重置页码了
}

const handleTabClick = () => {
  // 切换标签时不需要重置页码了
}

const selectNotice = (notice) => {
  selectedNotice.value = notice
  // 增加浏览量
  notice.views++
}

const refreshNotices = () => {
  // 这里可以添加刷新公告的逻辑
  console.log('刷新公告')
}

const getTagType = (type) => {
  const typeMap = {
    '医院新闻': 'primary',
    '就诊指南': 'success',
    '科室动态': 'warning'
  }
  return typeMap[type] || 'info'
}
</script>

<style scoped>
.notice {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-list-card {
  margin-bottom: 20px;
}

.notice-detail-card {
  margin-bottom: 20px;
  min-height: 300px;
}

.empty-detail {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice-item {
  cursor: pointer;
  transition: all 0.3s;
}

.notice-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notice-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-summary {
  color: #606266;
  font-size: 14px;
}

.notice-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-date {
  color: #909399;
  font-size: 14px;
}

.detail-title {
  font-size: 18px;
  margin-bottom: 15px;
}

.detail-content {
  line-height: 1.6;
  margin-bottom: 20px;
}

.detail-footer {
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
  color: #909399;
  font-size: 14px;
}

.detail-author, .detail-department {
  margin-bottom: 5px;
}

.hot-notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.hot-notice-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-notice-views {
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style> 